<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Welcome to Reminder System</title>

<style type="text/css">

body {
 background-color: #fff;
 margin: 40px;
 font-family: Lucida Grande, Verdana, Sans-serif;
 font-size: 14px;
 color: #4F5155;
}

a {
 color: #003399;
 background-color: transparent;
 font-weight: normal;
}

h1 {
 color: #444;
 background-color: transparent;
 border-bottom: 1px solid #D0D0D0;
 font-size: 16px;
 font-weight: bold;
 margin: 24px 0 2px 0;
 padding: 5px 0 6px 0;
}

code {
 font-family: Monaco, Verdana, Sans-serif;
 font-size: 12px;
 background-color: #f9f9f9;
 border: 1px solid #D0D0D0;
 color: #002166;
 display: block;
 margin: 14px 0 14px 0;
 padding: 12px 10px 12px 10px;
}
div.ui-datepicker{
 font-size:12px;
}
</style>
<script>
function validate(){
	
	if(document.getElementById('username').value=="" ||
	document.getElementById('password').value=="" ||
	document.getElementById('email').value==""){
		document.getElementById('message').innerHTML = "Username, password and email are required.";
		return false;
	}	
}

function showdiv(divid){
	document.getElementById(divid).style.visibility='';
	if(divid == 'recurring'){
		document.getElementById('non-recurring').style.visibility='hidden';
	}
	else{
		document.getElementById('recurring').style.visibility='hidden';
	}
}
</script>

<script type="text/javascript" src="<?php echo base_url();?>js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/jquery-ui-timepicker-addon.js"></script>
<link href="<?php echo base_url();?>/css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="stylesheet" type="text/css">
<link href="<?php echo base_url();?>/css/ui-lightness/jquery-ui-timepicker.css" rel="stylesheet" type="text/css">


</head>
<body>

<h1>Welcome to Reminder System!</h1>
<h2>Create a new Task</h2>
<form name="CreateTask" action="<?php echo site_url('welcome/create_task'); ?>" method = "post" onsubmit="return validate();">
		<div id="message" style="width:400px; background-color:#E0F0FF;">
			<?php
				echo $msg;
			?>
		</div>		
		<br/>Task:<input type = "text" id="task" name = "task"/><br/>
		
		<br/>Reminder mode:	<input type = "checkbox" id="email_phone" name="email_phone[]" value="email"/>Email me &nbsp;&nbsp;&nbsp;&nbsp;
			<input type = "checkbox" id="email_phone" name="email_phone[]" value="phone"/>Text me &nbsp;&nbsp;&nbsp;&nbsp;
		
		<br/><br/>Task type:
		<input type="radio" name="task_type" value="recurring" onclick="showdiv('recurring')">Recurring</input>
		<input type="radio" name="task_type" value="nonrecurring" onclick="showdiv('non-recurring')">Non-Recurring</input>
		
		<div id="non-recurring" style="visibility:hidden; position:absolute;">
			<br/><br/>Date:<input type = "text" id="date" name = "date"/><br/>
			<br/>Time:<input type = "text" id="nrtime" name = "nrtime"/><br/>
			<br/><br/><input type = "submit" value="Add Task"/>
		</div>
		
		<div id="recurring" style="visibility:hidden; position:absolute;">
			<br/>Start Date:<input type = "text" id="start_date" name = "start_date"/><br/>
			<br/>End Date:<input type = "text" id="end_date" name = "end_date"/><br/>
			<br/>Time:<input type = "text" id="rtime" name = "rtime"/><br/>
			
			
			<br/>Days of the week:<br/><br/>
			<input type = "checkbox" id="day" name="day[]" value="Mon"/>Monday &nbsp;&nbsp;&nbsp;&nbsp;
			<input type = "checkbox" id="day" name="day[]" value="Tue"/>Tuesday &nbsp;&nbsp;&nbsp;&nbsp;
			<input type = "checkbox" id="day" name="day[]" value="Wed"/>Wednesday&nbsp;&nbsp;&nbsp;&nbsp;
			<input type = "checkbox" id="day" name="day[]" value="Thu"/>Thursday<br/>
			<input type = "checkbox" id="day" name="day[]" value="Fri"/>Friday&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input type = "checkbox" id="day" name="day[]" value="Sat"/>Saturday&nbsp;&nbsp;&nbsp;&nbsp;
			<input type = "checkbox" id="day" name="day[]" value="Sun"/>Sunday&nbsp;&nbsp;&nbsp;&nbsp;
			
			<br/><br/><input type = "submit" value="Add Task"/>
		</div>		
		<script>
			$(function() {
				$( "#date" ).datepicker({dateFormat: "yy-mm-dd"});
				$("#nrtime").timepicker({});
				$( "#start_date" ).datepicker({dateFormat: "yy-mm-dd"});
				$( "#end_date" ).datepicker({dateFormat: "yy-mm-dd"});
				$("#rtime").timepicker({});
			});
		</script>

</form>		
</body>
		
</html>